<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">{{ isEdit ? '编辑同步任务' : '新增同步任务' }}</h1>
      <p class="page-subtitle">配置数据同步任务参数</p>
    </div>

    <div class="form-container">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="left"
        v-loading="loading"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          
          <el-form-item label="任务名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入任务名称"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="同步类型" prop="sync_type">
            <el-radio-group v-model="form.sync_type">
              <el-radio value="full">全量同步</el-radio>
              <el-radio value="incremental">增量同步</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item 
            v-if="form.sync_type === 'incremental'" 
            label="增量字段" 
            prop="incremental_field"
          >
            <el-input
              v-model="form.incremental_field"
              placeholder="请输入增量同步的时间字段，如：updated_at"
            />
          </el-form-item>

          <el-form-item label="同步频率" prop="sync_frequency">
            <el-select v-model="form.sync_frequency" placeholder="请选择同步频率">
              <el-option label="手动执行" value="" />
              <el-option label="每分钟" value="0 * * * * *" />
              <el-option label="每5分钟" value="0 */5 * * * *" />
              <el-option label="每小时" value="0 0 * * * *" />
              <el-option label="每天凌晨2点" value="0 0 2 * * *" />
              <el-option label="每周一凌晨2点" value="0 0 2 * * 1" />
            </el-select>
          </el-form-item>

          <el-form-item label="线程数量" prop="thread_count">
            <el-input-number
              v-model="form.thread_count"
              :min="1"
              :max="10"
              placeholder="同步线程数"
              style="width: 200px"
            />
          </el-form-item>
        </div>

        <!-- 数据源配置 -->
        <div class="form-section">
          <div class="section-title">数据源配置</div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="源数据源" prop="source_id">
                <el-select 
                  v-model="form.source_id" 
                  placeholder="请选择源数据源"
                  @change="handleSourceChange"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ds in datasources"
                    :key="ds.id"
                    :label="ds.name"
                    :value="ds.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标数据源" prop="target_id">
                <el-select 
                  v-model="form.target_id" 
                  placeholder="请选择目标数据源"
                  @change="handleTargetChange"
                  style="width: 100%"
                >
                  <el-option
                    v-for="ds in datasources"
                    :key="ds.id"
                    :label="ds.name"
                    :value="ds.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 同步表配置 -->
        <div class="form-section" v-if="form.source_id && form.target_id">
          <div class="section-title">
            同步表配置
            <el-button type="primary" link @click="addSyncConfig" style="margin-left: 10px">
              ➕ 添加表配置
            </el-button>
          </div>
          
          <div class="sync-configs">
            <el-card 
              v-for="(config, index) in syncConfigs" 
              :key="index" 
              class="sync-config-card"
              shadow="hover"
            >
              <template #header>
                <div class="config-header">
                  <span>表配置 {{ index + 1 }}</span>
                  <el-button 
                    type="danger" 
                    link 
                    @click="removeSyncConfig(index)"
                    :disabled="syncConfigs.length <= 1"
                  >
                    删除
                  </el-button>
                </div>
              </template>
              
              <div class="config-content">
                <!-- 表选择 -->
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item :label="`源表 ${index + 1}`" :prop="`syncConfigs.${index}.source_table`">
                      <el-select 
                        v-model="config.source_table" 
                        placeholder="请选择源表"
                        @change="handleConfigSourceTableChange(index)"
                        style="width: 100%"
                        filterable
                      >
                        <el-option
                          v-for="table in sourceTables"
                          :key="table"
                          :label="table"
                          :value="table"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="`目标表 ${index + 1}`" :prop="`syncConfigs.${index}.target_table`">
                      <el-select 
                        v-model="config.target_table" 
                        placeholder="请选择目标表"
                        @change="handleConfigTargetTableChange(index)"
                        style="width: 100%"
                        filterable
                      >
                        <el-option
                          v-for="table in targetTables"
                          :key="table"
                          :label="table"
                          :value="table"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 数据筛选条件 -->
                <el-form-item :label="`源表查询条件 ${index + 1}`">
                  <el-input
                    v-model="config.source_where_condition"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入WHERE条件，例如：status = 'active'"
                  />
                </el-form-item>

                <el-form-item :label="`冲突处理策略 ${index + 1}`">
                  <el-select v-model="config.conflict_strategy" style="width: 200px">
                    <el-option label="替换 (REPLACE)" value="replace" />
                    <el-option label="忽略 (IGNORE)" value="ignore" />
                    <el-option label="更新 (UPDATE)" value="update" />
                  </el-select>
                </el-form-item>

                <!-- 字段映射 -->
                <div v-if="config.sourceFields && config.targetFields && config.sourceFields.length > 0 && config.targetFields.length > 0">
                  <div class="mapping-title">
                    字段映射
                    <el-button type="primary" link @click="autoMapConfigFields(index)" style="margin-left: 10px">
                      自动映射
                    </el-button>
                  </div>
                  
                  <div class="field-mapping">
                    <div class="mapping-header">
                      <div class="source-header">源字段</div>
                      <div class="arrow-header"></div>
                      <div class="target-header">目标字段</div>
                      <div class="transform-header">数据转换</div>
                      <div class="action-header">操作</div>
                    </div>
                    
                    <div 
                      v-for="(mapping, mappingIndex) in config.field_mapping" 
                      :key="mappingIndex" 
                      class="mapping-row"
                    >
                      <div class="source-field">
                        <el-select v-model="mapping.source" placeholder="选择源字段">
                          <el-option
                            v-for="field in config.sourceFields"
                            :key="field.name"
                            :label="`${field.name} (${field.type})`"
                            :value="field.name"
                          />
                        </el-select>
                      </div>
                      <div class="arrow">→</div>
                      <div class="target-field">
                        <el-select v-model="mapping.target" placeholder="选择目标字段">
                          <el-option
                            v-for="field in config.targetFields"
                            :key="field.name"
                            :label="`${field.name} (${field.type})`"
                            :value="field.name"
                          />
                        </el-select>
                      </div>
                      <div class="transform-field">
                        <el-select v-model="mapping.transform" placeholder="选择转换规则" clearable>
                          <el-option label="无转换" value="" />
                          <el-option label="转大写" value="upper" />
                          <el-option label="转小写" value="lower" />
                          <el-option label="去除空格" value="trim" />
                          <el-option label="日期格式化" value="date_format" />
                          <el-option label="数字格式化" value="number_format" />
                        </el-select>
                      </div>
                      <div class="action">
                        <el-button 
                          type="danger" 
                          link 
                          @click="removeConfigMapping(index, mappingIndex)"
                          :disabled="config.field_mapping.length <= 1"
                        >
                          删除
                        </el-button>
                      </div>
                    </div>
                    
                    <el-button type="primary" link @click="addConfigMapping(index)" class="add-mapping">
                      ➕ 添加映射
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>



        <!-- 高级配置 -->
        <div class="form-section">
          <div class="section-title">高级配置</div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="批处理大小" prop="batch_size">
                <el-input-number
                  v-model="form.batch_size"
                  :min="100"
                  :max="10000"
                  :step="100"
                  placeholder="批处理大小"
                  style="width: 100%"
                />
                <div class="form-tip">每批处理的记录数</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据预览">
                <el-button 
                  type="info" 
                  @click="previewData" 
                  :disabled="!canPreview"
                  style="width: 100%"
                >
                  预览数据
                </el-button>
                <div class="form-tip">预览将要同步的数据</div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            {{ isEdit ? '更新' : '创建' }}
          </el-button>
        </div>
      </el-form>
    </div>

    <!-- 数据预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      title="数据预览"
      width="80%"
      :before-close="handleClosePreview"
    >
      <div class="preview-container">
        <div class="preview-info">
          <el-alert
            title="预览说明"
            type="info"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>以下是根据当前配置将要同步的数据预览（最多显示前10条记录）</p>
              <p>共配置了 {{ syncConfigs.length }} 个同步表</p>
            </template>
          </el-alert>
        </div>
        
        <div class="preview-data" v-loading="previewLoading">
          <el-table :data="previewDataList" style="width: 100%" max-height="400">
            <el-table-column
              v-for="mapping in validFieldMappings"
              :key="mapping.target"
              :prop="mapping.source"
              :label="`${mapping.source} → ${mapping.target}`"
              min-width="150"
            >
              <template #default="{ row }">
                <div class="preview-cell">
                  <div class="source-value">{{ row[mapping.source] }}</div>
                  <div class="arrow-small">↓</div>
                  <div class="target-value">
                    {{ transformPreviewValue(row[mapping.source], mapping.transform) }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="previewDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="refreshPreview" :loading="previewLoading">
          刷新预览
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getTaskDetail, createTask, updateTask } from '@/api/task'
import { getDatasourceOptions, getDatabaseTables, getTableFields } from '@/api/datasource'

const router = useRouter()
const route = useRoute()
const formRef = ref()
const loading = ref(false)
const submitting = ref(false)

// 判断是否为编辑模式
const isEdit = computed(() => !!route.params.id)

// 数据源列表
const datasources = ref([])
const sourceTables = ref([])
const targetTables = ref([])

// 同步配置列表
const syncConfigs = ref([{
  source_table: '',
  target_table: '',
  source_where_condition: '',
  conflict_strategy: 'replace',
  field_mapping: [{ source: '', target: '', transform: '' }],
  sourceFields: [],
  targetFields: []
}])

// 数据预览
const previewDialogVisible = ref(false)
const previewLoading = ref(false)
const previewDataList = ref([])

// 表单数据
const form = reactive({
  name: '',
  sync_type: 'full',
  sync_frequency: '',
  incremental_field: '',
  thread_count: 1,
  source_id: null,
  target_id: null,
  batch_size: 1000
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  sync_type: [
    { required: true, message: '请选择同步类型', trigger: 'change' }
  ],
  source_id: [
    { required: true, message: '请选择源数据源', trigger: 'change' }
  ],
  target_id: [
    { required: true, message: '请选择目标数据源', trigger: 'change' }
  ],
  incremental_field: [
    { 
      required: true, 
      message: '增量同步需要指定增量字段', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (form.sync_type === 'incremental' && !value) {
          callback(new Error('增量同步需要指定增量字段'))
        } else {
          callback()
        }
      }
    }
  ],
  thread_count: [
    { required: true, message: '请输入线程数量', trigger: 'blur' },
    { type: 'number', min: 1, max: 10, message: '线程数量范围 1-10', trigger: 'blur' }
  ],
  batch_size: [
    { required: true, message: '请输入批处理大小', trigger: 'blur' },
    { type: 'number', min: 100, max: 10000, message: '批处理大小范围 100-10000', trigger: 'blur' }
  ]
}

// 处理源数据源变化
const handleSourceChange = async (sourceId) => {
  if (sourceId) {
    try {
      const res = await getDatabaseTables(sourceId)
      sourceTables.value = res.data || []
    } catch (error) {
      ElMessage.error('获取源表列表失败')
    }
  } else {
    sourceTables.value = []
  }
  // 清空所有配置的表选择
  syncConfigs.value.forEach(config => {
    config.source_table = ''
    config.sourceFields = []
    config.field_mapping = [{ source: '', target: '', transform: '' }]
  })
}

// 处理目标数据源变化
const handleTargetChange = async (targetId) => {
  if (targetId) {
    try {
      const res = await getDatabaseTables(targetId)
      targetTables.value = res.data || []
    } catch (error) {
      ElMessage.error('获取目标表列表失败')
    }
  } else {
    targetTables.value = []
  }
  // 清空所有配置的表选择
  syncConfigs.value.forEach(config => {
    config.target_table = ''
    config.targetFields = []
    config.field_mapping = [{ source: '', target: '', transform: '' }]
  })
}

// 处理配置中的源表变化
const handleConfigSourceTableChange = async (configIndex) => {
  const config = syncConfigs.value[configIndex]
  if (config.source_table && form.source_id) {
    try {
      const res = await getTableFields(form.source_id, config.source_table)
      config.sourceFields = res.data || []
    } catch (error) {
      ElMessage.error('获取源表字段失败')
    }
  } else {
    config.sourceFields = []
  }
  config.field_mapping = [{ source: '', target: '', transform: '' }]
}

// 处理配置中的目标表变化
const handleConfigTargetTableChange = async (configIndex) => {
  const config = syncConfigs.value[configIndex]
  if (config.target_table && form.target_id) {
    try {
      const res = await getTableFields(form.target_id, config.target_table)
      config.targetFields = res.data || []
    } catch (error) {
      ElMessage.error('获取目标表字段失败')
    }
  } else {
    config.targetFields = []
  }
  config.field_mapping = [{ source: '', target: '', transform: '' }]
}

// 自动映射字段
const autoMapFields = () => {
  const mappings = []
  sourceFields.value.forEach(sourceField => {
    const targetField = targetFields.value.find(tf => tf.name === sourceField.name)
    if (targetField) {
      mappings.push({
        source: sourceField.name,
        target: targetField.name,
        transform: ''
      })
    }
  })
  
  if (mappings.length > 0) {
    fieldMappings.value = mappings
    ElMessage.success(`自动映射了 ${mappings.length} 个字段`)
  } else {
    ElMessage.warning('没有找到可以自动映射的字段')
  }
}

// 添加映射
const addMapping = () => {
  fieldMappings.value.push({ source: '', target: '', transform: '' })
}

// 添加同步配置
const addSyncConfig = () => {
  syncConfigs.value.push({
    source_table: '',
    target_table: '',
    source_where_condition: '',
    conflict_strategy: 'replace',
    field_mapping: [{ source: '', target: '', transform: '' }],
    sourceFields: [],
    targetFields: []
  })
}

// 删除同步配置
const removeSyncConfig = (index) => {
  syncConfigs.value.splice(index, 1)
}

// 自动映射配置字段
const autoMapConfigFields = (configIndex) => {
  const config = syncConfigs.value[configIndex]
  const mappings = []
  
  config.sourceFields.forEach(sourceField => {
    const targetField = config.targetFields.find(tf => tf.name === sourceField.name)
    if (targetField) {
      mappings.push({
        source: sourceField.name,
        target: targetField.name,
        transform: ''
      })
    }
  })
  
  if (mappings.length > 0) {
    config.field_mapping = mappings
    ElMessage.success(`表配置 ${configIndex + 1} 自动映射了 ${mappings.length} 个字段`)
  } else {
    ElMessage.warning(`表配置 ${configIndex + 1} 没有找到可以自动映射的字段`)
  }
}

// 添加配置映射
const addConfigMapping = (configIndex) => {
  syncConfigs.value[configIndex].field_mapping.push({ source: '', target: '', transform: '' })
}

// 删除配置映射
const removeConfigMapping = (configIndex, mappingIndex) => {
  syncConfigs.value[configIndex].field_mapping.splice(mappingIndex, 1)
}

// 是否可以预览数据
const canPreview = computed(() => {
  return form.source_id && form.target_id && syncConfigs.value.some(config => 
    config.source_table && config.target_table && config.field_mapping.some(m => m.source && m.target)
  )
})

// 有效的字段映射（用于预览）
const validFieldMappings = computed(() => {
  if (syncConfigs.value.length > 0) {
    return syncConfigs.value[0].field_mapping.filter(m => m.source && m.target)
  }
  return []
})

// 预览数据
const previewData = async () => {
  previewDialogVisible.value = true
  await refreshPreview()
}

// 刷新预览数据
const refreshPreview = async () => {
  if (!form.source_id || syncConfigs.value.length === 0 || !syncConfigs.value[0].source_table) {
    ElMessage.warning('请先配置数据源和同步表')
    return
  }
  
  previewLoading.value = true
  try {
    // 模拟预览数据
    const mockData = [
      { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active', created_at: '2024-01-15 10:30:00' },
      { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive', created_at: '2024-01-14 15:20:00' },
      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active', created_at: '2024-01-13 09:15:00' }
    ]
    
    // 模拟API延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    previewDataList.value = mockData
    ElMessage.success('预览数据加载成功')
  } catch (error) {
    ElMessage.error('预览数据失败')
  } finally {
    previewLoading.value = false
  }
}

// 转换预览值
const transformPreviewValue = (value, transform) => {
  if (!transform || !value) return value
  
  switch (transform) {
    case 'upper':
      return String(value).toUpperCase()
    case 'lower':
      return String(value).toLowerCase()
    case 'trim':
      return String(value).trim()
    case 'date_format':
      return new Date(value).toLocaleDateString()
    case 'number_format':
      return Number(value).toLocaleString()
    default:
      return value
  }
}

// 关闭预览对话框
const handleClosePreview = () => {
  previewDialogVisible.value = false
  previewDataList.value = []
}

// 删除映射
const removeMapping = (index) => {
  fieldMappings.value.splice(index, 1)
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    // 验证同步配置
    if (syncConfigs.value.length === 0) {
      ElMessage.error('请至少配置一个同步表')
      return
    }
    
    // 验证每个配置
    for (let i = 0; i < syncConfigs.value.length; i++) {
      const config = syncConfigs.value[i]
      if (!config.source_table || !config.target_table) {
        ElMessage.error(`表配置 ${i + 1} 请选择源表和目标表`)
        return
      }
      
      const validMappings = config.field_mapping.filter(m => m.source && m.target)
      if (validMappings.length === 0) {
        ElMessage.error(`表配置 ${i + 1} 请至少配置一个字段映射`)
        return
      }
      
      // 更新配置中的有效映射
      config.field_mapping = validMappings
    }
    
    submitting.value = true
    
    const taskData = {
      ...form,
      sync_configs: syncConfigs.value.map(config => ({
        source_table: config.source_table,
        target_table: config.target_table,
        source_where_condition: config.source_where_condition,
        conflict_strategy: config.conflict_strategy,
        field_mapping: config.field_mapping,
        data_transform_rules: config.field_mapping.filter(m => m.transform).map(m => ({
          field: m.target,
          transform: m.transform
        }))
      }))
    }
    
    if (isEdit.value) {
      await updateTask(route.params.id, taskData)
      ElMessage.success('任务更新成功！')
    } else {
      await createTask(taskData)
      ElMessage.success('任务创建成功！')
    }
    
    router.push('/task')
  } catch (error) {
    if (error.response?.data?.message) {
      ElMessage.error(error.response.data.message)
    } else {
      ElMessage.error('操作失败，请检查输入信息')
    }
  } finally {
    submitting.value = false
  }
}

// 取消操作
const handleCancel = () => {
  router.back()
}

// 加载数据源列表
const loadDatasources = async () => {
  try {
    const res = await getDatasourceOptions()
    datasources.value = res.data || []
  } catch (error) {
    ElMessage.error('获取数据源列表失败')
  }
}

// 加载任务数据（编辑模式）
const loadTaskData = async () => {
  if (isEdit.value) {
    loading.value = true
    try {
      const res = await getTaskDetail(route.params.id)
      const taskData = res.data
      
      Object.assign(form, {
        name: taskData.name,
        sync_type: taskData.sync_type,
        sync_frequency: taskData.sync_frequency || '',
        incremental_field: taskData.incremental_field || '',
        thread_count: taskData.thread_count,
        source_id: taskData.source_id,
        target_id: taskData.target_id,
        batch_size: taskData.batch_size || 1000
      })
      
      // 解析同步配置
      if (taskData.sync_configs && taskData.sync_configs.length > 0) {
        syncConfigs.value = taskData.sync_configs.map(config => ({
          source_table: config.source_table,
          target_table: config.target_table,
          source_where_condition: config.source_where_condition || '',
          conflict_strategy: config.conflict_strategy || 'replace',
          field_mapping: config.field_mapping || [{ source: '', target: '', transform: '' }],
          sourceFields: [],
          targetFields: []
        }))
      }
      
      // 加载表列表
      if (form.source_id) {
        await handleSourceChange(form.source_id)
      }
      
      if (form.target_id) {
        await handleTargetChange(form.target_id)
      }
      
      // 加载每个配置的字段信息
      for (let i = 0; i < syncConfigs.value.length; i++) {
        const config = syncConfigs.value[i]
        if (config.source_table) {
          await handleConfigSourceTableChange(i)
        }
        if (config.target_table) {
          await handleConfigTargetTableChange(i)
        }
      }
    } catch (error) {
      ElMessage.error('获取任务信息失败')
      router.back()
    } finally {
      loading.value = false
    }
  }
}

onMounted(() => {
  loadDatasources()
  loadTaskData()
})
</script>

<style lang="scss" scoped>
.form-section {
  margin-bottom: 40px;
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 60px;
      height: 2px;
      background: var(--primary-color);
    }
  }
}

.field-mapping {
  .mapping-header {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 1fr 80px;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  .mapping-row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 1fr 80px;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    
    .arrow {
      text-align: center;
      font-size: 18px;
      color: var(--primary-color);
      font-weight: bold;
    }
  }
  
  .add-mapping {
    margin-top: 16px;
  }
}

.form-tip {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
}

.sync-configs {
  .sync-config-card {
    margin-bottom: 20px;
    
    .config-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }
    
    .config-content {
      .mapping-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 20px 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-light);
      }
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input-number) {
  width: 100%;
}

.preview-container {
  .preview-info {
    margin-bottom: 20px;
  }
  
  .preview-data {
    .preview-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      
      .source-value {
        padding: 4px 8px;
        background: #f0f9ff;
        border: 1px solid #bae7ff;
        border-radius: 4px;
        font-size: 12px;
        color: #0958d9;
        width: 100%;
        text-align: center;
      }
      
      .arrow-small {
        font-size: 12px;
        color: var(--primary-color);
      }
      
      .target-value {
        padding: 4px 8px;
        background: #f6ffed;
        border: 1px solid #b7eb8f;
        border-radius: 4px;
        font-size: 12px;
        color: #389e0d;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>